<script setup>
import ClientNav from './components/ClientNav.vue';
import { code, bigScreen, phone } from '@/views/home/assets/index.js';
import { useRouter } from 'vue-router';

const router = useRouter();

const goPage = (name) => router.push({ name });
</script>

<template>
    <section class="home-wrapper">
        <section class="nav">
            <ClientNav />
        </section>
        <section class="main">
            <div class="content">
                <div>
                    <div class="title">
                        <span>Vue3-Dooring</span>
                        可视化编辑器
                    </div>
                    <p class="description">
                        Vue3-Dooring是一款功能强大，开源免费的可视化页面配置解决方案，
                        致力于提供一套简单方便、专业可靠、无限可能的落地页最佳实践。 技术栈以Vue为主，
                        后台采用nodejs开发。
                    </p>
                </div>

                <div class="function-box">
                    <a-card hoverable style="width: 240px; height: 240px" @click="goPage('H5Editor')">
                        <a-card-meta>
                            <template #title>
                                <div class="card-label">
                                    <a-image
                                        :preview="false"
                                        :src="phone"
                                        style="height: 56px; width: 56px; margin-bottom: 10px"
                                    />
                                    <h3>制作H5</h3>
                                </div>
                            </template>
                        </a-card-meta>
                    </a-card>
                    <a-card hoverable style="width: 240px; height: 240px" @click="goPage('CodeOnline')">
                        <a-card-meta>
                            <template #title>
                                <div class="card-label">
                                    <a-image
                                        :preview="false"
                                        :src="code"
                                        style="height: 56px; width: 56px; margin-bottom: 10px"
                                    />
                                    <h3>在线编程</h3>
                                </div>
                            </template>
                        </a-card-meta>
                    </a-card>
                    <a-card hoverable style="width: 240px; height: 240px">
                        <a-card-meta>
                            <template #title>
                                <div class="card-label">
                                    <a-image
                                        :preview="false"
                                        :src="bigScreen"
                                        style="height: 56px; width: 56px; margin-bottom: 10px"
                                    />
                                    <h3>制作可视化大屏</h3>
                                </div>
                            </template>
                        </a-card-meta>
                    </a-card>
                </div>
            </div>
        </section>
    </section>
</template>

<style scoped>
.home-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    .nav {
        flex: 0 0 25%;
    }
    .main {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .content {
            width: 70%;
            text-align: center;
            .title {
                font-size: 28px;
                font-weight: 700;
                line-height: 50px;
                margin-bottom: 20px;
                text-align: center;
                span {
                    font-size: 36px;
                    color: #1890ff;
                    font-weight: 700;
                }
            }
            .description {
                font-size: 18px;
                text-align: center;
                width: 60%;
                margin: 0 auto;
            }
        }
        .function-box {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .card-label {
                height: 200px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
